<template>
  <div class="results results-yes relative">
    <div class="table-bg clearfix margin-bottom-10">

      <div class="table-bg-left text-center">
        <h3 class="line-1">中华人民共和国</h3>
        <h2 class="line-2">建筑工程施工许可证</h2>
        <p class="line-3">编号:{{detail?.sgxkNewCode}}</p>
        <p class="line-4">根据 《 中华人民共和国建筑法 》 第八条规定，经审查，本建筑工程符合施工条件，准予施工。</p>
        <p class="line-4">特此发证。</p>
        <p :style="{marginTop: '120px'}">签发机关 :{{detail?.sgxkFzUnitName}}</p>
        <p>发证日期:{{ parseTime(detail?.sgxkFzDate) }}</p>
      </div>

      <div class="table-bg-right">
        <table class="tbg-table">
          <tr>
            <td>建设单位</td>
            <td colspan="3">{{detail?.buildCorp}}</td>
          </tr>
          <tr>
            <td>工程名称</td>
            <td colspan="3">{{detail?.xkgcName}}</td>
          </tr>
          <tr>
            <td>建设地址</td>
            <td colspan="3">{{detail?.xkgcAddr}}</td>
          </tr>
          <tr>
            <td>建设规模</td>
            <td colspan="3">{{detail?.xkgcSgzmj}}{{detail?.xkgcSgzmjDw}}</td>
          </tr>
          <tr>
            <td width="64">合同工期</td>
            <td width="164"> {{parseTime(detail?.xkgcSdate)}} 至 {{parseTime(detail?.xkgcEdate)}}</td>
            <td width="64">合同价格</td>
            <td>{{detail?.xkgcHtj}}<span v-if="detail?.xkgcHtj">万元</span></td>
          </tr>
        </table>
        <p class="text-center font-xs can-tit">参建单位</p>
        <table class="tbg-table">
          <tr>
            <td width="64">勘察单位</td>
            <td width="184">{{detail?.surveyCorp}}</td>
            <td width="84">项目负责人</td>
            <td>{{detail?.surveyStaff}}</td>
          </tr>
          <tr>
            <td>设计单位</td>
            <td>{{detail?.designCorp}}</td>
            <td>项目负责人</td>
            <td>{{detail?.designStaff}}</td>
          </tr>
          <tr>
            <td>施工单位</td>
            <td>{{detail?.constructionCorp}}</td>
            <td>项目负责人</td>
            <td>{{detail?.constructionStaff}}</td>
          </tr>
          <tr>
            <td>监理单位</td>
            <td>{{detail?.supervisorCorp}}</td>
            <td>总监理工程师</td>
            <td>{{detail?.supervisorStaff}}</td>
          </tr>
          <tr>
            <td>工程总承包单位</td>
            <td>{{detail?.contractCorp}}</td>
            <td>项目经理</td>
            <td>{{detail?.contractStaff}}</td>
          </tr>
          <tr>
            <td colspan="4">备注:{{detail?.sgxkRemark}}</td>
          </tr>
        </table>

        <p class="l5">
          一、本证放置施工现场，作为准予施工的凭证。 <br>
          二、未经发证机关许可，本证的各项内容不得变更。<br>
          三、住房城乡建设行政主管部门可以对本证进行查验。<br>
          四、本证自发证之日起三个月内应予施工，逾期应办理延期手续，不办理延期或延期
          次数、时间超过法定时间的，本证自行废止。<br>
          五、在建的建筑工程因故中止施工的，建设单位应当自中止施工之日起一个月内向发
          证机关报告，并按照规定做好建筑工程的维护管理工作。<br>
          六、建筑工程恢复施工时，应当向发证机关报告；中止施工满一年的工程恢复施工
          前，建设单位应当报发证机关核验施工许可证。<br>
          七、凡未取得本证擅自施工的属违法建设，将按《中华人民共和国建筑法》的规定予
          以处罚。"
        </p>
      </div>

      <ul class="shake">
        <li v-for="item in 16">证书仅供预览</li>
      </ul>
    </div>


  </div>
</template>
<script lang="ts" >
import {defineComponent, PropType, toRefs} from "vue";
import { parseTime } from '/@/utils';

interface BaseModel {
  area?:string;
  sgxkFzDate?:number;
  sgxkFzUnitName?:string;
  sgxkId?:string;
  sgxkNewCode?:string;
  sgxkRemark: null
  xkgcAddr?:string;
  xkgcEdate?:number;
  xkgcHtj?:number;
  xkgcName?:string;
  xkgcSdate?:number;
  xkgcSgzmj?:string;
  xkgcSgzmjDw?:string;
  buildCorp?:string;
  constructionCorp?:string;
  constructionStaff?:string;
  contractCorp?:string;
  contractStaff?:string;
  designCorp?:string;
  designStaff?:string;
  supervisorCorp?:string;
  supervisorStaff?:string;
  surveyCorp?:string;
  surveyStaff?:string;
}

export default defineComponent({
  props: {
    detail:{
      type: Object as PropType<BaseModel>,
      default: {}
    }
  },
  setup(props) {
    const { detail } = toRefs(props);
    return {
      detail , parseTime
    }
  }
})
</script>

<style lang="less" scoped>
.results{
  overflow: hidden;
}

.table-bg{
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 900px;
  padding: 26px 26px;
  margin: 0 auto;
  color: #000;
  background: url("/public/resource/image/bg.png") repeat;
}

.table-bg>div{
  width: 48.5%;
  //height: 580px;
  border: 1px solid #333;
}

.table-bg-left{
  float: left;
  padding: 30px;
}

.table-bg-right{
  float: right;
  padding: 10px;
  border: 1px solid #333;
}

.tbg-table{
  width: 100%;
  font-size: 12px;
  border: 1px solid #333;
  border-collapse: collapse;
  border-spacing: 0;


  td{
    padding: 5px ;
    font-size: 10px;
    vertical-align: middle;
    border: 1px solid #333;
  }
}

.can-tit{
  margin: 5px 0;
}

.line-1{
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.line-2{
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}

.line-3{
  margin-bottom: 60px;
  font-size: 14px;
  font-weight: bold;
}

.line-4{
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: left;
  text-indent: 2em;

}

.text-center{
  text-align: center;
}

.l5{
  font-size: 10px;
  color: #555;
}

.shake{
  position: absolute;
  top: 120px;
  left: 80px;
  z-index: 9999;
  width: 100%;
  height: 100%;

  li{
    display: inline-block;
    margin-right: 50px;
    margin-bottom: 150px;
    font-size: 24px;
    color: rgba(0,0,0,0.1);
    transform: rotateZ(-45deg);
    user-select: none;
  }
}

</style>

